<template>
    <div class="tour_price"
        v-loading="time_loading">
        <div class="tour_price_left">
            <Calendar now="今日"
                ref="calendar"
                :responsive="true"
                :events="date"
                :clean="false"
                :range="range"
                @select="select"
                @prev="change_month"
                @next="change_month"></Calendar>
        </div>
        <div class="tour_price_right">
            <div style="">
                <el-button type="primary"
                    size="small"
                    @click="range = false">单天</el-button>
                <el-button type="primary"
                    size="small"
                    @click="range = true ">多天</el-button>
            </div>

            <el-form ref="form"
                :model="price_form"
                label-width="100px">
                <el-form-item label="日期">
                    <el-input v-model="price_form.date"
                        disabled="disabled"></el-input>
                </el-form-item>
                <!-- <el-form-item label="选择时间段"
                    v-if="range">
                    <el-date-picker v-model="createTime"
                        style="width: 250px;"
                        type="daterange"
                        align="right"
                        unlink-panels
                        value-format="timestamp"
                        range-separator="-"
                        clearable
                        start-placeholder="时间起点"
                        end-placeholder="时间终点">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item label="成人价">
                    <el-input v-model="price_form.price"></el-input>
                </el-form-item>
                <el-form-item label="成人成本价">
                    <el-input v-model="price_form.cost_price"></el-input>
                </el-form-item>
                <el-form-item label="儿童价">
                    <el-input v-model="price_form.baby_price"></el-input>
                </el-form-item>
                <el-form-item label="儿童成本价">
                    <el-input v-model="price_form.baby_cost_price"></el-input>
                </el-form-item>
            </el-form>
            <div style="width:100%;    display: flex;">

                <el-button type="primary"
                    size="small"
                    style="margin:0 auto"
                    @click="save_edit">保存编辑</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import Calendar from "mpvue-calendar";
// import "mpvue-calendar/src/style.css";
import "mpvue-calendar/src/browser-style.css";
export default {
  name: "tour_price",
  data() {
    return {
      range: false,
      createTime: [],
      data: {},
      price_form: {
        date: "",
        baby_cost_price: "",
        baby_price: "",
        cost_price: "",
        price: ""
      },
      time_loading: false,
      date: {}
    };
  },
  props: {
    shopid: {
      type: [String, Number],
      number: 0
    }
  },
  components: {
    Calendar
  },
  created() {
    let now = this.get_nowdate();
    console.log(now);
    this.get_date(now);
  },
  computed: {
    get_shopid() {
      return this.shopid;
    }
  },
  watch: {
    get_shopid(old, after) {
      let now = this.get_nowdate();
      this.get_date(now);
    },
    createTime(val) {
      if (val != null) {
        this.price_form.day_begin = this.$fnc.phptime(val[0]);
        this.price_form.day_end = this.$fnc.phptime(val[1]);
      } else {
        this.price_form.day_begin = "";
        this.price_form.day_end = "";
      }
    }
  },
  methods: {
    save_edit() {
      let params = {};
      params.pid = this.shopid;
      params.price = this.price_form.price;
      params.cost_price = this.price_form.cost_price;
      params.baby_price = this.price_form.baby_price;
      params.baby_cost_price = this.price_form.baby_cost_price;
      params.day_begin = this.price_form.day_begin;
      params.day_end = this.price_form.day_end;
      this.$api.getPage.add_tour_price(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("添加成功");
          this.get_date(this.price_form.date.substring(0, 6));
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
      if (this.range) {
        // 范围
        console.log(params);
      } else {
        // 单天
        console.log(params);
      }
      /*
                    if (this.price_form.id == 0) {
                      //添加价格
                      params.pid = this.shopid;
                      params.day = this.price_form.date;
                      this.$api.getPage.add_tour_price(params).then(res => {
                        if (res.data.code == 200) {
                          this.$fnc.alertSuccess("添加成功");
                          this.get_date(this.price_form.date.substring(0, 6));
                        } else {
                          this.$fnc.alertError(res.data.result);
                        }
                      });
                    } else {
                      //编辑价格
                      params.id = this.price_form.id;
                      this.$api.getPage.edit_tour_price(params).then(res => {
                        if (res.data.code == 200) {
                          this.$fnc.alertSuccess("编辑成功");
                          this.get_date(this.price_form.date.substring(0, 6));
                        } else {
                          this.$fnc.alertError(res.data.result);
                        }
                      });
                    }
                    */
    },
    select(val, val2) {
      //选择日期
      this.price_form.day_begin = {};
      if (this.range && val && val2) {
        // 范围
        let date1 = this.php_time(val.join("-"));
        let date2 = this.php_time(val2.join("-"));
        this.price_form.date = date1 + "-" + date2;
        this.price_form.day_begin = date1;
        this.price_form.day_end = date2;
        // let time1 = this.$fnc.vuetime(new Date(date1).getTime());
        // let time2 = this.$fnc.vuetime(new Date(date2).getTime());
        //  this.createTime = [time1, time2];
        // console.log(time1, time2);
      } else if (!this.range) {
        // 单天
        let date_single = this.arr_time(val.join("-"));
        let time_single = this.$fnc.phptime(new Date(date_single).getTime());
        // this.price_form.day_begin = time_single;
        // this.price_form.day_end = time_single;
        let date = this.php_time(val2.date);
        this.price_form.date = date;
        this.price_form.day_begin = date;
        this.price_form.day_end = date;
        this.price_form.price = this.data[date].price;
        this.price_form.cost_price = this.data[date].cost_price;
        this.price_form.baby_price = this.data[date].baby_price;
        this.price_form.baby_cost_price = this.data[date].baby_cost_price;
        this.price_form.id = this.data[date].id || "";
      }
    },
    //切换月份
    change_month(year, month, weekIndex) {
      if (month < 10) {
        this.get_date(year + "0" + month);
      } else {
        this.get_date(year + "" + month);
      }
    },
    get_date(month) {
      this.time_loading = true;
      this.date = {};
      this.$api.getPage
        .get_tour_price({ pid: this.shopid, month: month })
        .then(res => {
          if (res.data.code == 200) {
            this.time_loading = false;
            this.data = res.data.result;
            let obj = res.data.result;
            for (const key in obj) {
              if (obj.hasOwnProperty(key)) {
                const element = obj[key];
                let k = this.time_php(key);
                this.date[k] = element.price;
                this.$refs.calendar.renderer(k.split("-")[0], k.split("-")[1]); //2019,1
              }
            }
          } else {
            this.time_loading = false;
          }
        });
    },
    get_nowdate() {
      var myDate = new Date();
      var tYear = myDate.getFullYear();
      console.log(tYear);

      var tMonth = myDate.getMonth();
      var m = tMonth + 1;
      if (m.toString().length == 1) {
        m = "0" + m;
      }
      return tYear + "" + m;
      // return m;
    },
    time_php(val) {
      //20190930    == > "2019-9-30"
      let year = val.substring(0, 4);
      let month = val.substring(4, 6);
      let day = val.substring(6, 8);
      return `${parseInt(year)}-${parseInt(month)}-${parseInt(day)}`;
    },
    php_time(val) {
      //2019-9-5"  == > "20190905"
      let arr = val.split("-");
      let year = arr[0];
      let month = arr[1];
      let day = arr[2];
      month = parseInt(month) < 10 ? "0" + month : month;
      day = parseInt(day) < 10 ? "0" + day : day;
      return `${year}${month}${day}`;
    },
    arr_time(val) {
      let arr = val.split("-");
      let year = arr[0];
      let month = arr[1];
      let day = arr[2];
      month = parseInt(month) < 10 ? "0" + month : month;
      day = parseInt(day) < 10 ? "0" + day : day;
      return `${year}-${month}-${day}`;
    }
  }
};
</script>
<style  scoped>
.tour_price {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.tour_price_left {
  width: 500px;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 5px;
}
.tour_price_right {
  width: 500px;
  padding: 40px 20px;
  background-color: #f8f8f8;
  border-radius: 5px;
}
.tour_price_right > div:nth-of-type(1) {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: end;
  padding: 0 20px 10px 0;
}
.tour_price_right .el-input {
  width: 250px;
}
</style>
